{{extend './_layout.html'}}

{{block 'title'}}{{ title }}{{/block}}

{{block 'head'}}
<!-- Bootstrap core CSS -->
<link href="/public/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="/public/css/signin.css" rel="stylesheet">
<link href="/public/css/login.css" rel="stylesheet">
{{/block}}

{{block 'content'}}
<div class="container">

  <form id="loginForm" class="form-signin" action="/admin/login" method="POST">
    <h2 class="form-signin-heading">欢迎登录后台管理系统</h2>
    <label for="inputAccount" class="sr-only">账号</label>
    <input type="text" id="inputAccount" name="account" class="form-control" placeholder="请输入账号" required autofocus>
    <label for="inputPassword" class="sr-only">密码</label>
    <input type="password" id="inputPassword" name="passwd" class="form-control" placeholder="请输入密码" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" name="rememberme" id="rememberme" value="1"> 记住密码
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" id="btnSubmit" type="submit">登录</button>
    <p>{{ tip }}</p>
  </form>

</div> <!-- /container -->

<script src="/public/js/jquery.min.js"></script>
<script>
  $(function (){
    // 记住密码
    $('#btnSubmit').click(function () {
      var account = $('#inputAccount').val()
      var passwd = $('#inputPassword').val()
      var rememberme = $('#rememberme').prop('checked')
      localStorage.setItem('rememberme', rememberme)
      if(rememberme) {
        localStorage.setItem('account', account)
        localStorage.setItem('passwd', passwd)
      }
    })
    // 是否还原密码
    var flag = localStorage.getItem('rememberme')
    if(flag === 'true') {
      $('#inputAccount').val(localStorage.getItem('account'))
      $('#inputPassword').val(localStorage.getItem('passwd'))
      $('#rememberme').prop('checked', 'checked')
    }
  })
</script>
{{/block}}
